<template>
  <div>
    <p>答题模板</p>
    <!-- 搜索栏 -->
    <div>
      <el-form
        :inline="true"
        :model="formInline"
        class="form-inline"
        :rules="rules"
        ref="formInline"
      >
        <el-row class="Search">
          <el-col :span="8">
            <el-form-item :label="'模板名称'" prop="name">
              <el-input v-model="formInline.name" size="small"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button
                type="primary"
                @click="perSearch(formInline)"
                size="mini"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" @click="addnewanswer()" size="mini"
                >新建</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表单数据 -->
    <!-- table表格配置 -->
    <el-table
      ref="multipleTable"
      :data="tableData.list"
      tooltip-effect="dark"
      style="width: 100%; font-size: 10px"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      :row-style="tableRowClassName"
    >
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        v-for="(item, index) in option"
        :key="index"
        :width="item.width"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button @click="editinfo(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <!-- <el-button type="text" size="small">删除</el-button> -->
          <el-button @click="deleteRow(scope.row)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-row
      type="flex"
      justify="end"
      align="middle"
      style="height: 60px"
      v-if="tableData.paging"
    >
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="tableData.page.page"
        :page-size="tableData.page.pageSize"
        layout="total, prev, pager, next"
        :total="tableData.page.total"
        :small="true"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import { deletenewanswertab } from "@/api/hubeixiaojin/queryInfo";
export default {
  name: "faceuserinfoIndex",
  props: ["tableData", "option"],
  components: {},

  data() {
    // 表单身份证x`
    var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("证件号不能为空!!"));
      }
      if (!idcardReg.test(value)) {
        callback(new Error("请输入正确的证件号码！"));
      } else {
        callback();
      }
    };
    return {
      //表格修改背景色用
      radioId: [],
      //搜索框信息
      formInline: {
        name: ""
      },
      agentInfo: {
        //当前座席名字和id
        // dispatchingPerson: Constants.Agent.agentName,
        // dispatchingId: Constants.Agent.agentId,
        // //目标座席和id
        // agentId: "",
        // agentName: "",
        // //座席行政组
        // deptGroupName: Constants.Agent.deptGroupName,
        // //行政组code
        // deptGroupCode: Constants.Agent.deptGroupCode,
        // //access_token
        // access_token: Constants.Agent.access_token,
        // //tenantId
        // tenantId: Constants.Agent.tenantId,
        // //orgCode
        // orgCode: Constants.Agent.orgCode
      } //调单用到的座席信息
    };
  },
  mounted() {
    const sessionStr = sessionStorage.getItem("userInfo");
    const agentUser = JSON.parse(sessionStr);
    this.agentInfo = agentUser.content;
  },
  methods: {
    //删除行
    deleteRow(row) {
      const index = this.tableData.list.findIndex(item => item.id === row.id); // 假设每行数据有唯一id属性
      if (index !== -1) {
        console.log("删除数据==", this.tableData.list[index]);

        //获取时间
        let now = new Date();
        let year = now.getFullYear();
        let month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要+1
        let day = String(now.getDate()).padStart(2, "0");
        let hours = String(now.getHours()).padStart(2, "0");
        let minutes = String(now.getMinutes()).padStart(2, "0");
        let seconds = String(now.getSeconds()).padStart(2, "0");

        let formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

        //删除

        var params = {
          condition: {
            verifyQuestions: this.tableData.list[index].verifyQuestions,

            createTime: formattedDateTime,
            incomingPassage: this.tableData.list[index].incomingPassage,
            name: this.tableData.list[index].name,
            remark: this.tableData.list[index].remark,
            updateTime: formattedDateTime,
            id: this.tableData.list[index].id,
            totalScore: this.tableData.list[index].totalScore,
            operator: this.agentInfo.dispatchingPerson,

            deleted: 1 //是否是删除
          }
        };

        deletenewanswertab(params, this.agentInfo).then(res => {
          if (res.data.retCode == 200 || res.data.retCode == "200") {
            this.tableData.list.splice(index, 1);
            this.$message.success("删除成功");
            this.$emit("deleteRow");
          } else {
            this.$message.error("领单失败");
          }
        });
      }
    },
    //查看行
    handleClick(row) {
      // console.log("查看详细信息==",row);
      this.$emit("lookdata", row);
    },

    editinfo(row) {
      this.$emit("editinfo", row);
    },

    addnewanswer() {
      // console.log("新增答题模板");
      this.$emit("addnewanswer");
    },

    perSearch(val) {
      // console.log("查询", val);
      this.$emit("getInfodata", val);
    },

    // 分页
    handleCurrentChange(newPage) {
      this.$emit("handleChange", newPage);
    },
    // 选中单选背景色
    tableRowClassName({ row, rowIndex }) {
      if (this.radioId === row.id) {
        return {
          border: "1px solid #000",
          "background-color": "rgb(173 206 234 / 75%)"
        };
      }
    }
  }
};
</script>

<style>
.form-inline {
  /* display: flex; */
  /* justify-content: space-between; */
  /* margin-bottom: 20px; */
}
.Search {
  width: 100%;
  text-align: center;
}
.AdjustInput {
  display: flex;
  justify-content: end;
}
</style>
